<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="设置" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<u-cell-group>
			<u-cell-item title="微信" :arrow="false" @click="ToPages" index="1">
				<view slot="icon"></view>
				<view slot="right-icon">
					<view class="wx_info" v-if="userData.nickname">
						<image class="my_wx_cion" :src="userData.avatar"></image>{{userData.nickname + '的微信'}}
					</view>
					<view class="wx_info" v-else>
						ID:{{userData.id}}
					</view>
				</view>
			</u-cell-item>
      <u-cell-item title="手机号" :arrow="true" :value="userData.username || '去绑定'" @click="ToPages" index="2">
        <view slot="icon"></view>
      </u-cell-item>
      <u-cell-item title="关联美团账号" :arrow="true" :value="userData.mt_mobile || '立即绑定'" @click="changeMTTel" index="10">
        <view slot="icon"></view>
      </u-cell-item>
      <u-cell-item title="提现账号" arrow value="微信" @click="ToPages" index="3">
				<view slot="icon"></view>
			</u-cell-item>
			<!--<u-cell-item title="提现密码" arrow value="设置/修改" @click="ToPages" index="7">
				<view slot="icon"></view>
			</u-cell-item>-->
<!--			<u-cell-item title="登录密码" arrow value="修改" @click="ToPages" index="8">-->
<!--				<view slot="icon"></view>-->
<!--			</u-cell-item>-->
<!--			<u-cell-item title="关于我们" arrow :value="'V'+version" @click="ToPages" index="4">-->
<!--				<view slot="icon"></view>-->
<!--			</u-cell-item>-->
			<u-cell-item title="隐私政策" arrow @click="ToPages" index="5">
				<view slot="icon"></view>
			</u-cell-item>
			<u-cell-item title="用户协议" arrow @click="ToPages" index="6">
				<view slot="icon"></view>
			</u-cell-item>
			<u-cell-item title="注销账号" arrow @click="ToPages" index="9">
				<view slot="icon"></view>
			</u-cell-item>

		</u-cell-group>

    <view style="text-align: center;margin-top: 38rpx;font-size: 26rpx;color: #999999">当前版本号：{{'V'+version}}</view>

		<view class="lijipay">
			<u-button type="info" :hair-line="false" hover-class="none" shape="circle" :ripple="false" @click="Loingshow = true">退出登录</u-button>
		</view>
		<u-modal border-radius="32" v-model="Loingshow" title="温馨提示" content="您确定要退出登陆吗？退出后无法享受本程序的任何服务!" :show-cancel-button="true"
			@confirm="Yesconfirm" confirm-color="#FE7B20"></u-modal>

		<!--设置提现密码-->
		<u-keyboard ref="uKeyboard" mode="number" v-model="txmimaShow"></u-keyboard>

		<u-modal border-radius="32" v-model="zhuxiaoshow" title="温馨提示" content="请确认你的账号中是否存在（如可提余额、推广收益等），提现操作完成后可注销账户。否则一切后果自己承担!"
			:show-cancel-button="true" @confirm="YesZhuxiao" confirm-color="#FE7B20"></u-modal>

    <!--修改关联美团手机号-->
    <u-popup v-model="isMTTelPop" mode="center" round="20" border-radius="20" @close="MTTelPopClose" width="80%">
      <view class="tel_box">
        <view class="tel_title">修改美团账号手机号</view>
        <u-line style="color: #999999;"></u-line>
        <view class="desc_text">
          <text style="color: #FF3E00;font-size: 26rpx">新手机号需与美团绑定手机号一致</text>
        </view>
        <view style="margin-left: 30rpx;margin-top: 10rpx;font-size: 28rpx">手机号</view>
        <view class="input_name">
          <u-input border="none"
                   class="inputWidth"
                   type="number"
                   clearable
                   :customStyle="{'border-radius': 0,padding:'0rpx'}"
                   placeholder="请输入手机号" v-model="MTtel"/>
        </view>
        <view class="tip" style="position: relative">
          <text>您也可以前往我的-设置-关联美团手机号进行修改。</text>
          <text style="color: #ff7400;" @click="toMTSetting">点击查看美团绑定的手机号</text>
        </view>
        <view class="btns_con">
          <button class="zbbm" @click="MTTelPopClose">取消修改</button>
          <button class="submit" @click="MTTelPopSubmit">确认修改</button>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	import store from '@/public/store.js'
	export default {
		data() {
			return {
				Loingshow: false,
				txmimaShow: false,
				userData: {},
				alipayInfo: {},
				zhuxiaoshow: false,
				version: '1.0.16',
        isMTTelPop: false,
        MTtel: '', //美图手机号
			}
		},
		onLoad() {
			//获取版本号
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				console.log("当前版本号信息:", JSON.stringify(info));
				this.version = info.version;
				//this.versionCode = info.versionCode ;
			})
			//#endif
      //#ifdef MP-WEIXIN
      const accountInfo = uni.getAccountInfoSync();
      if (accountInfo.miniProgram.version) {
        this.version = accountInfo.miniProgram.version;
      }
      //#endif
		},
		onShow() {
			let that = this
			let userInfo = uni.getStorageSync('userinfo')
      console.log('用户信息', userInfo)
			that.userData = userInfo
      that.MTtel  = userInfo.mt_mobile
			that.getAliPayInfo()
		},
		methods: {
			YesZhuxiao() {
				this.zhuxiaoshow = false
        this.$api.logoutAPI({}).then(res => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        })
				this.clear_usercode()
			},
			getAliPayInfo() {
				let that = this
				that.$api.getaliPayinfo({

				}).then(res => {
					that.alipayInfo = res.data.result
				}).catch(err => {
					uni.showToast({
						title: err.data.msg,
						icon: 'none',
						duration: 2000
					});
				})
			},
			ToPages(e) {
				console.log(e)
				if (e == 1) {
					//uni.navigateTo({
					//	url: '/pages/me/BasicSettings/ChangebindingWeChat'
					//})
				} else if (e == 2) {
					/* if (!this.userData.username || this.userData.username == '') {
						/!* uni.navigateTo({
							url: '/mePages/pages/Bindphone',
							animationType: 'pop-in'
						}) *!/
            uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						uni.navigateTo({
							url: '/mePages/pages/BasicSettings/ChangebindingPhone'
						})
					} */
          uni.navigateTo({
            url: '/mePages/pages/BasicSettings/ChangebindingPhone'
          })
				} else if (e == 3) {
					uni.navigateTo({
						url: '/mePages/pages/BasicSettings/withdrawalaccount',
						animationType: 'pop-in'
					})
				} else if (e == 4) {
					uni.navigateTo({
						url: '/mePages/pages/BasicSettings/Aboutus',
						animationType: 'pop-in'
					})
				} else if (e == 5) {
					uni.navigateTo({
						url: '/subpackageA/pages/yszc',
						animationType: 'pop-in'
					})
				} else if (e == 6) {
					uni.navigateTo({
						url: '/subpackageA/pages/yhxy',
						animationType: 'pop-in'
					})
				} else if (e == 7) {
					//支付宝账号和密码同时未设置时，优先提示设置提现账户
					if (this.alipayInfo.alipay_number == '') {
						uni.showToast({
							title: '请先设置提现账号',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.navigateTo({
							url: '/mePages/pages/BasicSettings/tixianpassword/Stepone',
							animationType: 'pop-in'
						})
					}
				} else if (e == 8) {
					uni.navigateTo({
						url: '/mePages/pages/BasicSettings/reviseLogonpass',
						animationType: 'pop-in'
					})
				} else if (e == 9) {
					this.zhuxiaoshow = true
				}
			},
      // 关联美图手机号
      changeMTTel(){
        let that = this
        that.isMTTelPop = true
        console.log('关联美图手机号',  that.isMTTelPop)
      },
      // 查看美团绑定的手机号
      toMTSetting(){
        let that = this
        that.toMiniAppSetting(1)
      },
      toMiniAppSetting(shopType){
        // #ifdef MP
        const id = shopType === 1 ? 'wx4f94383014cbd4dd' : 'wxece3a9a4c82f58c9';
        const path = shopType === 1 ? "mt/pages/setting/setting" : 'ele-search/pages/search/search';
        uni.openEmbeddedMiniProgram({
          appId: id,
          path: path,
          success: function (res) {
            console.log('success', res);
          },
          fail: function (res) {
            console.log('fail', res);
          }
        })
        // #endif
      },
      // 修改美图手机号
      MTTelPopSubmit(){
        let that = this
        // 判断手机号是否正确
        if(/^1[3-9]\d{9}$/.test(that.MTtel)){
          that.$api.getBindMtPhoneAPI({
            mt_mobile: that.MTtel,
          }).then(res => {
            if (res.data.code === 200){
              uni.showToast({
                title: res.data.msg,
                icon: 'none',
                duration: 400
              })
              that.isMTTelPop = false
              that.GetUserInfo()
            }
          }).catch(err => {
            uni.showToast({
              title: err.data.msg,
              icon: 'none',
              duration: 400
            })
          })
        } else {
          uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none',
            duration: 1000
          })
        }

      },
      // 关闭关联美团手机号弹窗
      MTTelPopClose(){
        let that = this
        that.isMTTelPop = false
      },
			Yesconfirm() {
				this.clear_usercode()
				this.Loingshow = false
			},
      // 获取用户信息
      GetUserInfo() {
        let that = this
        that.$api.GetuserInfo({}).then(res => {
          that.userData = res.data.result
          that.MTtel = that.userInfo.mt_mobile
          // console.log('用户信息===', res.data.result);
          // 正则表达式匹配中国大陆的手机号格式
          const regex = /^1[3-9]\d{9}$/;
          /*if (!res.data.result.username) {
            that.showEffect = true;
          } else {
            that.showEffect = false;
          }*/
          uni.setStorageSync('userinfo', res.data.result)
        }).catch(err => {
        });
      },
			//退出登录
			clear_usercode() {
				store.commit('setWithdrawalTarget', 10)
				uni.removeStorageSync('userinfo');
				uni.removeStorageSync('token');
				uni.removeStorageSync('wechat_login_tag');
				//uni.removeStorageSync('lng');
				//uni.removeStorageSync('lat');

				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '退出成功',
						icon: 'none',
						duration: 3000,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1000)
				} else {
					uni.showToast({
						title: '退出失败',
						icon: 'none',
						duration: 3000,
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.wx_info {
		display: flex;
		align-items: center;

		.my_wx_cion {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
			border-radius: 200rpx;
		}
	}

	.lijipay {
		width: 100%;
		margin-top: 100rpx;
		position: fixed;
		bottom: 3%;
		width: 92%;
		margin: 0 auto;
		left: 0;
		right: 0;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			background-image: linear-gradient(to right, #f7f7f7, #f7f7f7) !important;
			color: #333333;
		}
	}
  /* 修改关联美团手机号css */
  .tel_box {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 20rpx;
    .tel_title {
      font-size: 32rpx;
      color: #000;
      font-weight: bold;
      text-align: center;
      box-sizing: border-box;
      margin-top: 6rpx;
      padding: 20rpx;
    }

    .desc_text {
      font-size: 22rpx;
      line-height: 36rpx;
      padding: 30rpx 30rpx 0;
    }

    .tip {
      color: #BFBFBF;
      font-size: 24rpx;
      line-height: 36rpx;
      margin: 0 30rpx;
    }

    .input_name {
      margin: 20rpx 30rpx;
      background: #F6F6F6;
    }

    .btns_box {
      width: 280rpx;
      height: 64rpx;
      background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #fff;
      line-height: 64rpx;
      text-align: center;
    }

    .btns_con {
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      margin: 20rpx 30rpx 30rpx;

      button {
        margin-left: 30rpx;
        font-size: 24rpx;
      }

      .zbbm {
        border-radius: 50rpx;
        width: 40%;
        background-color: #FFFFFF;
        border: #DDDDDD 1rpx solid;
        color: #999999;
      }
      .zbbm:after{
        border: none;
      }
      .submit {
        border-radius: 50rpx;
        width: 40%;
        background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
        color: #FFFFFF;
      }
      .submit:after{
        border: none;
      }
    }
  }
</style>